<!--
- Author:  LiShibin.
- Date:    2017/8/2 0002.
- File:    index.
-->
<template>
  <div class="Web_Box">
    <div @click="gotoLoginPwd" class="Topmenu"><i class="iconfont icon-youjiantou"><a href=""></a></i>
      <h1>手机短信验证码登陆</h1>
      <span></span>
    </div>
    <div class="login_dl">
      <div class="login_ipt1">
        <i class="iconfont icon-denglu_shoujihao1"></i><input type="tel" placeholder="手机号码" v-model="mobile">
        <span style="width: 120px;">
          <message-code type="2" :tel="mobile" :sended-style="sendedStyle" :callback="handleMessageCode"></message-code>
        </span>
      </div>
      <div class="login_ipt1">
        <i class="iconfont icon-wangjimima_yanzhengma"></i><input type="tel" placeholder="输入验证码" v-model="code">
      </div>

    </div>
    <div class="login_btn1" style="padding: 3rem 10px;">
      <span @click="login">快速登陆</span>
    </div>
  </div>
  <!--<div class="">-->
    <!--&lt;!&ndash;<span @click="" class="close"><i class="iconfont icon-guanbi"></i></span>&ndash;&gt;-->
    <!--<div class="logo2"><img src="../../assets/images/lgoo.png"></div>-->
    <!--<div class="login_cont">-->
      <!--<div class="login_ipt">-->
        <!--<input type="tel" placeholder="手机号码" v-model="mobile">-->
      <!--</div>-->
      <!--<div class="login_ipt2">-->
        <!--<input type="tel" placeholder="验证码" v-model="code"><label>-->
        <!--<span>-->
        <!--<a href="javascript:void(0)">-->
          <!--<message-code type="2" :tel="mobile" :sended-style="sendedStyle" :callback="handleMessageCode"></message-code>-->
        <!--</a>-->
        <!--</span>-->
      <!--</label>-->
      <!--</div>-->
      <!--<div class="login_btn">-->
        <!--<button @click="login">验证码登录</button>-->
      <!--</div>-->

      <!--<div class="login_tit"><span class="title">其他登录方式</span></div>-->
      <!--<div class="login_other">-->
        <!--<ul class="clear">-->
          <!--<li><a href="javascript:void(0)" @click="wxLogin"><i class="iconfont icon-iconfontweixin2"></i><span>微信登录</span></a></li>-->
          <!--<li><a href="javascript:void(0)" @click="gotoLoginPwd"><i class="iconfont icon-mima"></i><span>密码登录</span></a></li>-->
        <!--</ul>-->
      <!--</div>-->

    <!--</div>-->
  <!--</div>-->
</template>

<script>
  import messageCode from '../../components/message-code.vue'
  import {mapModules} from 'vuet'

  export default{
    mixins: [
      mapModules({wxInfo: 'wxInfo'})
    ],
    beforeRouteEnter (to, from, next) {
      // if (!document.body.classList.contains('login_bg')) {
      //   document.body.classList.add('login_bg')
      // }
      next()
    },
    beforeRouteLeave  (to, from, next) {
      // if (to.name != 'login-password' && to.name != 'login-bind') {
      //   document.body.classList.remove('login_bg')
      // }
      next()
    },
    components: {
      'message-code': messageCode
    },
    data() {
      return {
        mobile: '',
        code: '',
        check_mobile: {},
        sendedStyle: {color: '#595757'}
      }
    },
    methods: {
      gotoLoginPwd() {
        this.$router.replace({name: 'login-password'})
      },
      login() {
        if (!this.$validator.phone(this.mobile)) {
          this.$toast('请输入正确的手机号')
          return
        }
        if (this.code == '') {
          this.$toast('请输入验证码')
          return
        }
        this.$request.loginByMessage(this.mobile, this.code, this.check_mobile).then(data => {
          this.$storage.setKey(data.key) // 测试用
          this.$router.replace({name: 'home'})
        }).catch(e => {
          this.$toast('登录失败:' + e.msg)
        })
      },
      wxLogin() {
        this.$native.weixinLogin().then(wxInfo => {
          console.log('微信登录成功', wxInfo)
          this.wxInfo = wxInfo
          this.$request.getKeyByUnionId(wxInfo.unionid).then(data => {
            console.log('根据unionid获取用户信息', data)
            if (data.key) {
              this.$storage.setKey(data.key)
              this.$router.replace({name: 'home'})
            } else {
              this.$router.replace({name: 'login-bind'})
            }
          })
        }).catch(e => {
          this.$toast('微信登录失败:' + e.msg)
        })
      },
      handleMessageCode(code) {
        this.check_mobile = code
      }
    }
  }
</script>

<style>
  .login_ipt1 input{height: 99%;}
</style>
